<template>
  <div>
    <van-button
      icon="plus"
      round
      block
      class="add_goods_type_button"
      @click="add_show = true"
    >
      添加商品
    </van-button>
    <div class="goods" v-for="(item, i) in goods_list" :key="i">
      <img :src="item.image" alt="" class="goods_image" />
      <div class="goods_desc">
        <div class="van-ellipsis">
          {{ item.name }}
        </div>
        <div class="goods_desc_data">
          {{ item.type_name }}<br />
          <span class="goods_price"> ￥{{ item.price }} </span>
        </div>
        <van-button
          round
          color="linear-gradient(to right, #ff8360, #ee0a24)"
          class="goods_type_button"
          @click="del_goods(item.id)"
        >
          下架
        </van-button>
        <van-button round class="goods_type_button" @click="up_show(item)">
          编辑
        </van-button>
      </div>
    </div>

    <!-- 类别 -->
    <van-popup
      v-model:show="type_show"
      round
      position="bottom"
      class="shops_goods_popup"
    >
      <van-picker
        :columns="goods_type_list"
        @cancel="type_show = false"
        @confirm="goods_type"
      >
        <template #option="option">
          {{ option.name }}
        </template>
      </van-picker>
    </van-popup>

    <!-- 添加菜品 -->
    <van-dialog
      title="添加菜品"
      v-model:show="add_show"
      :show-confirm-button="false"
      close-on-click-overlay
      class="shops_goods_dialog"
    >
      <van-form @submit="add_goods">
        <van-field placeholder="名称" v-model="goods.name" maxlength="20" />
        <van-field placeholder="价格" v-model="goods.price" />
        <van-field placeholder="图片" v-model="goods.image" />
        <van-field
          v-model="goods.type_name"
          is-link
          readonly
          placeholder="菜品类别"
          @click="type_show = true"
        />
        <van-button
          round
          block
          color="linear-gradient(to right, #ff8360, #ee0a24)"
          native-type="submit"
          class="dialog_button"
        >
          添加
        </van-button>
      </van-form>
    </van-dialog>



    <van-dialog 
      title="修改菜品"
      v-model:show="update_show" 
      :show-confirm-button="false"
      close-on-click-overlay
      class="shops_goods_dialog"
    >
      <van-form @submit="up_goods">
        <van-field placeholder="名称" v-model="goods.name"  maxlength="20"/>
        <van-field placeholder="价格" v-model="goods.price" />
        <van-field
          v-model="goods.type_name"
          is-link
          readonly
          placeholder="菜品类别"
          @click="type_show = true"
        />
        <van-field placeholder="图片" v-model="goods.image"/>
        <van-button round block color="linear-gradient(to right, #ff8360, #ee0a24)" 
          native-type="submit"
          class="dialog_button"
          >
          保存
        </van-button>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods_list: "",
      goods_type_list:{},
      active: null,
      user_id: localStorage.getItem("id"),
      // 添加
      type_show: null,
      goods: {
        type_name: null,
        name: null,
        type:null,
        image: null,
        price: null,
      },
      add_show: false,
      update_show: false,
    };
  },
  created() {
    this.submit();
    this.get_goods_type_list();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "shops/goods/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.goods_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    add_goods: function () {
      this.myaxios(this.host + "shops/goods/", "post", {
        user_id: this.user_id,
        name: this.goods.name,
        type: this.goods.type,
        image: this.goods.image,
        price: this.goods.price,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.add_show = false;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    get_goods_type_list:function(){
      this.myaxios(this.host + "shops/goods_type/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.goods_type_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    goods_type:function(val){
      this.goods.type_name = val.name;
      this.goods.type = val.id;
      this.type_show = false;
    },
    up_show:function(item){
      this.goods = JSON.parse(JSON.stringify(item));
      this.update_show = true;
    },
    up_goods: function(){
      this.myaxios(this.host + "shops/goods/", "put", {
        user_id: this.user_id,
        id:this.goods.id,
        name: this.goods.name,
        type: this.goods.type,
        image: this.goods.image,
        price: this.goods.price,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.update_show = false;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_goods: function(id){
      this.myaxios(this.host + "shops/goods/" + id, "delete", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
.add_goods_type_button {
  position: sticky;
  top: 3vw;
  width: 100%;
  height: 10vw;
}
.goods_type_button {
  margin-left: 2vw;
  float: right;
  width: 16vw;
  height: 8vw;
}
</style>